<!--
 * @Description: 
 * @Author: sanghx
 * @Date: 2020-07-07 15:27:22
 * @LastEditors: sanghx
 * @LastEditTime: 2020-07-08 15:30:10
--> 
<template>
  <div class="icon-box">
    <div v-for="(item,index) in List" :key="index" class="icon-box_item">
      <el-avatar :src="item.avatar_url" @click="toPage(item.html_url)"></el-avatar>
      <el-tooltip class="item" effect="dark" :content="item.name" placement="bottom">
        <div style="overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;">{{item.name}}</div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: "MochePortrait",
  props: ["List"],
  methods: {
    toPage(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style>
.icon-box {
  padding-bottom: 2rem;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.icon-box_item {
  margin: 0.5rem;
  display: table-row;
  width: 4rem;
}
</style>